@import "../comm.scss";

.home-skeleton {
	width: 100%;
	background: #fff;
	height: 100%;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	.home-skeleton-notification {
		height: 0.7rem;
		background-color: $color;
	}
	.home-skeleton-top {
		width: 90%;
		height: 5rem;
		background: $bg;
		// box-shadow: 0px 2px 0.2rem 0px rgba(0, 0, 0, 0.11);
		border-radius: 0.2rem;
		margin: 1.06rem auto;
		overflow: hidden;
	}
	.home-skeleton-top-able {
		width: 1.8rem;
		height: 0.3rem;
		margin: 0.66rem auto;
		background-color: $color;
		border-radius: 0.15rem;
	}
	.home-skeleton-top-quota {
		width: 2.1rem;
		height: 0.6rem;
		background-color: $color;
		margin: 0 auto;
		border-radius: 0.3rem;
	}
	.home-skeleton-top-bill {
		margin-top: 0.9rem;
		display: flex;
		justify-content: space-around;

		& > div {
			width: 2rem;
			height: 0.6rem;
			background-color: $color;
			border-radius: 0.3rem;
		}
	}
	.home-skeleton-middle {
		margin-top: 0.34rem;
		display: flex;
		background: $bg;
		flex-wrap: wrap;
		.home-skeleton-middle-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0.2rem 0;
			width: 25%;

			&::before {
				content: "";
				display: block;
				width: 0.8rem;
				height: 0.8rem;
				border-radius: 50%;
				background-color: $color;
			}
			&::after {
				content: "";
				display: block;
				width: 1.12rem;
				height: 0.4rem;
				background-color: $color;
				margin-top: 0.2rem;
				border-radius: 0.2rem;
			}
		}
	}
	.home-skeleton-bottom {
		padding: 0.3rem;
		margin-top: 0.56rem;
		background: $bg;
		.home-skeleton-bottom-title {
			width: 1.44rem;
			height: 0.5rem;
			background-color: $color;
			border-radius: 0.25rem;
		}
		.home-skeleton-bottom-banner {
			width: 100%;
			border-radius: 0.2rem;
			height: 2.2rem;
			background-color: $color;
			margin-top: 0.2rem;
		}
	}
	&::before {
		@include common();
	}
}
